<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="out">
    
          <el-page-header @back="$router.go(-1)">
            <template slot="content">
              <div class="header">
                <span>促销活动</span>
                <div>   <el-input v-model="search_content" placeholder="编号或者名称"></el-input>
                <el-button type="primary" @click="add">添加</el-button></div>
               
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table :data="db_activity" style="width: 100%" @row-dblclick="showDetail">
          <el-table-column
            align="center"
            prop="activityId"
            label="活动编号"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="activityName"
            label="活动名称"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="startDateTime"
            label="开始时间"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="endDateTime"
            label="结束时间"
            width="width"
          >
          </el-table-column>
          <el-table-column align="center">
          
            <template slot-scope="scope">
<!--              <el-button type="primary" size="small"   @click="handleEdit(scope.$index, scope.row)">修改</el-button>-->
              <el-button type="info" @click="delItem(scope.row)" size="small">删除</el-button>
        
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="width"
      :before-close="dialogBeforeClose"
    >

      <div>
        <el-card>
          <div slot="header">详细</div>
          <div>
          <el-descriptions :column="1">
            <el-descriptions-item label="活动编号">{{currentItem.activityId}}</el-descriptions-item>
            <el-descriptions-item label="活动名称">{{currentItem.activityName}}</el-descriptions-item>
            <el-descriptions-item label="开始时间">{{currentItem.startDateTime}}</el-descriptions-item>
            <el-descriptions-item label="结束时间">
              {{currentItem.endDateTime}}
            </el-descriptions-item>
    
            <el-descriptions-item label="活动类型">{{currentItem.type}}</el-descriptions-item>
                
            <el-descriptions-item label="赠品内容" v-if="currentItem.type=='限时赠礼'">{{currentItem.gift}}</el-descriptions-item>
            <el-descriptions-item label="降价金额" v-else>{{currentItem.discount}}</el-descriptions-item>
        </el-descriptions>
          </div>
        </el-card>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { mapState } from "vuex";
export default {

  computed: {
    ...mapState(["db_activity", "current_property"]),
  },
  methods: {
    showDetail(row ){
      this.dialogVisible = true
      this.currentItem = row
    },
    add(){
      this.$router.push('activity-add')
    },
    delItem(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            //网络请求
            //如果返回码是200
            this.$store.commit("delete_activity", row.id);
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },
    handleEdit(index, row) {
      console.log("row", row);
      this.$store.commit("set_current_activity", row);
      this.$router.push("/home/promote-update");
    },
  },
  data() {
    return {
      dialogVisible:false,
      currentItem: {
        activityId: "",
        name: "",
        startDateTime: "",
        endDateTime: "",
        type: "",
        range: "",
        postImg: null,
        detail: "",
        discount: 0,
        gift: "",
      },
      formData: [
        // {
        //    activityId:'001',
        //    activityName:'年终放送',
        //    startDateTime:'1630226301',
        //    endDateTime:'1632904700',
        // },
      ],
    };
  },
};
</script>
<style scoped>
.el-card {
  margin-top: 2rem;
}
.del-icon {
  margin-left: 1rem;
}

.el-card {
  margin-top: 2rem;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.out >>> .el-page-header__content {
  width: 90%;
}
.out >>> .el-page-header__left {
  align-items: center;
}

.header div{
  display: flex;
}
</style>